//引入react核心库
//es6的两种暴露的引入方式（默认暴露React；分别暴露{Component}）
import React, { Component } from "react";
import Header from "./Header";
import Footer from "./Footer";
import List from "./List";
import './index.css'

export default class TodoList extends Component {
  //状态在哪里，操作状态的方法就在哪里
  state = {
    todos: [
      {
        id: "001",
        name: "吃饭",
        done: true,
      },
      {
        id: "002",
        name: "睡觉",
        done: true,
      },
      {
        id: "003",
        name: "打代码",
        done: false,
      },
    ],
  };
  //用于添加一个todo，接收参数todo对象
  addTodo = (todoObj) => {
    //获取原todos
    const { todos } = this.state;
    //追加一个todo
    const newTodos = [todoObj, ...todos];
    //更新状态
    this.setState({ todos: newTodos });
  };
  //updateTodo用于更新一个todo对象
  updateTodo = (id,done) => {
    //获取状态中的todos
    const { todos } = this.state
    const newTodos = todos.map((todo) => {
      if(todo.id===id){
        return {...todo,done}
      }else return todo
    })
    this.setState({todos:newTodos})
  }
  //deleteTodo用于删除一个todo对象
  deleteTodo= (id) => {
    //获取原来的todos
    const { todos } = this.state
    //删除指定id的todo对象
    const newTodos = todos.filter(todoObj => todoObj.id !== id)
    //更新状态
    this.setState({todos:newTodos})
  }
  //全选
  checkAllTodo = (done) => {
    //获取原来的todos
    const { todos } = this.state
    //加工数据
    const newTodos = todos.map((todoObj) => {
      return {...todoObj,done}
      
    })
    //更新状态
    this.setState({todos:newTodos})
  }
  //清除所有已完成
  clearAllDone = (params) => {
    //获取原来的todos
    const { todos } = this.state
    //过滤数据
    const newTodos= todos.filter((todoObj) => {
      return !todoObj.done
    })
    //更新状态
    this.setState({todos:newTodos})
  }

  render() {
    const { todos} = this.state;
    return (
      <div>
        <div className="todo-container">
          <div className="todo-wrap">
            <Header addTodo={this.addTodo} />
            <List todos={todos} 
            updateTodo={this.updateTodo}
            deleteTodo={this.deleteTodo}
            />
            <Footer todos={todos} 
              checkAllTodo={this.checkAllTodo}
              clearAllDone={this.clearAllDone}
            />
          </div>
        </div>
      </div>
    );
  }
}
